<template>
  <div class="h-full flex flex-col">
    <div class="model-header pl-[10px] pr-[10px]">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-input v-model="queryData.username" placeholder="请输入用户名" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-input v-model="queryData.phone" placeholder="请输入手机号" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select v-model="queryData.roleIds" clearable multiple collapse-tags placeholder="请选择角色">
            <el-option v-for="item in options.roleOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select v-model="queryData.status" placeholder="请选择账号状态" clearable>
            <el-option label="启用" :value="1" />
            <el-option label="停用" :value="0" />
          </el-select>
        </el-col>
        <el-col :span="6" class="mb-[15px]">
          <div class="flex">
            <div>
              <el-button class="w-[80px]" color="#626aef" type="primary">
                查询
              </el-button>
            </div>
            <div class="ml-[15px]">
              <el-button class="w-[90px]" color="#626aef" type="primary" @click="openConfigDialog('add')">
                新增用户
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <div class="sheet flex-1 overflow-auto">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="用户id" width="100" align="center" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="phone" label="手机号" width="180" align="center" />
        <el-table-column prop="roleNames" label="所属角色" width="200" align="center" />
        <el-table-column label="账号状态" align="center" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
            <el-tag v-if="scope.row.status === 0" type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="340">
          <template #default="scope">
            <el-button type="primary" text @click="openConfigDialog('update', scope.row)">
              <Edit class="w-[18px] h-[18px] mr-[2px]" />
              编辑
            </el-button>
            <el-button type="primary" text @click="openConfigDialog('permission', scope.row)">
              <EditPen class="w-[16px] h-[18px] mr-[2px]" />
              编辑权限
            </el-button>
            <el-popconfirm title="确定重置密码吗?" width="180px">
              <template #reference>
                <el-button type="primary" text>
                  <SvgIcon class="mr-[2px]" name="publicReset" size="18px" color="#409EFF" />
                  重置密码
                </el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm :title="`确定${scope.row.status === 1 ? '停用' : '启用'}账户吗?`" width="180px">
              <template #reference>
                <el-button type="primary" text>
                  <SvgIcon v-if="scope.row.status === 0" class="mr-[2px]" name="onUser" size="16px" color="#409EFF" />
                  <SvgIcon v-if="scope.row.status === 1" class="mr-[2px]" name="offUser" size="16px" color="#f56c6c" />
                  <span>
                    {{ scope.row.status === 1 ? ' 停用' : '开启' }}
                  </span>
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination v-model:current-page="queryData.pageNum" v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]" :total="tableData.length" layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog @close="close" v-model="dialog.visible" :title="dialog.title" width="30%" style="padding:30px;">
      <div v-if="dialog.type === 'add' || dialog.type === 'update'">
        <el-form :model="userForm" :rules="rules" ref="userFormRef" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="userForm.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="角色" prop="roleIds">
            <el-select v-model="userForm.roleIds" clearable multiple collapse-tags placeholder="请选择角色">
              <el-option v-for="item in options.roleOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="dialog.type === 'permission'">
        <el-tree ref="treeRef" style="max-width: 600px" :data="data" show-checkbox default-expand-all node-key="id"
          highlight-current :props="defaultProps" />
      </div>
      <template #footer>
        <span class="dialog-footer" v-if="dialog.type === 'add' || dialog.type === 'update'">
          <el-button class="w-[80px]" @click="dialog.visible = false">取消</el-button>
          <el-button class="w-[80px]" type="primary" @click="submitAddUserForm">确定</el-button>
        </span>
        <span class="dialog-footer" v-else-if="dialog.type === 'permission'">
          <el-button class="w-[80px]" @click="dialog.visible = false">取消</el-button>
          <el-button class="w-[80px]" type="primary" @click="getCheckedKeys">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, reactive, nextTick } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/store/user';
import { useRouter } from 'vue-router';
const treeRef = ref<any>(null)
const defaultProps = {
  children: 'children',
  label: 'label',
}

const data = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 112,
    label: 'Level one 2',
    children: [
      {
        id: 115,
        label: 'Level two 2-1',
      },
      {
        id: 116,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]

const getCheckedKeys = () => {
  console.log(treeRef.value!.getCheckedKeys(false))
  dialog.visible = false
}


const SvgIcon = defineAsyncComponent(
  () => import('@/components/SvgIcon.vue'),
);

const router = useRouter();
const userStores = useUserInfo();

const queryData = reactive({
  username: '', //用户名称
  status: undefined, //账号状态
  roleIds: [],//角色
  phone: '', //手机号
  pageNum: 1, //页码
  pageSize: 10, //页数
});

const options = reactive({
  roleOptions: [
    {
      "ctime": "2024-07-30 11:06:09",
      "id": 1,
      "name": "管理员",
      "utime": "2024-07-30 11:06:09"
    },
    {
      "ctime": "2024-07-30 11:06:20",
      "id": 2,
      "name": "大模型经理",
      "utime": "2024-07-30 11:06:20"
    },
    {
      "ctime": "2024-07-30 11:06:27",
      "id": 3,
      "name": "标注经理",
      "utime": "2024-07-30 11:06:27"
    },
    {
      "ctime": "2024-07-30 11:06:32",
      "id": 4,
      "name": "标注员",
      "utime": "2024-07-30 11:06:32"
    },
    {
      "ctime": "2024-07-30 11:06:36",
      "id": 5,
      "name": "标注审核员",
      "utime": "2024-07-30 11:06:36"
    },
    {
      "ctime": "2024-08-06 16:01:20",
      "id": 6,
      "name": "前端测试",
      "utime": "2024-08-06 16:01:20"
    },
    {
      "ctime": "2024-08-06 16:55:18",
      "id": 7,
      "name": "测试1",
      "utime": "2024-08-06 16:55:18"
    },
    {
      "ctime": "2024-08-06 16:55:25",
      "id": 8,
      "name": "测试2",
      "utime": "2024-08-06 16:55:25"
    },
    {
      "ctime": "2024-08-06 16:55:32",
      "id": 9,
      "name": "测试3",
      "utime": "2024-08-06 16:55:32"
    },
    {
      "ctime": "2024-08-06 16:55:40",
      "id": 10,
      "name": "测试4",
      "utime": "2024-11-12 11:45:03"
    },
    {
      "ctime": "2024-08-06 16:57:24",
      "id": 11,
      "name": "123",
      "utime": "2024-08-06 16:57:24"
    },
    {
      "ctime": "2024-08-23 06:32:56",
      "id": 12,
      "name": "0822测试",
      "utime": "2024-08-23 06:32:56"
    },
    {
      "ctime": "2024-08-23 15:41:53",
      "id": 13,
      "name": "test1232322",
      "utime": "2024-08-26 14:34:43"
    },
    {
      "ctime": "2024-08-23 16:40:31",
      "id": 14,
      "name": "12345678901",
      "utime": "2024-08-23 16:40:31"
    },
    {
      "ctime": "2025-02-14 09:07:32",
      "id": 15,
      "name": "管理员11",
      "utime": "2025-02-14 09:07:32"
    }
  ],
});

const tableData = [
  {
    "ctime": "2025-02-11 08:41:30",
    "id": "63",
    "name": "",
    "organization": null,
    "phone": "19938291931",
    "roleIds": [
      1,
      2,
      3,
      4,
      5
    ],
    "roleNames": "大模型经理,标注员,标注审核员,标注经理,管理员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "金涛"
  },
  {
    "ctime": "2025-02-08 17:37:52",
    "id": "62",
    "name": "",
    "organization": null,
    "phone": "15554482539",
    "roleIds": [
      1,
      2,
      3,
      4,
      5
    ],
    "roleNames": "大模型经理,标注员,标注审核员,标注经理,管理员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "邓吉森"
  },
  {
    "ctime": "2025-02-08 14:38:20",
    "id": "61",
    "name": "",
    "organization": null,
    "phone": "17862719101",
    "roleIds": [
      4
    ],
    "roleNames": "标注员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "刘轩毓"
  },
  {
    "ctime": "2024-12-19 13:56:18",
    "id": "60",
    "name": "",
    "organization": null,
    "phone": "13211111111",
    "roleIds": [
      4
    ],
    "roleNames": "标注员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "testqq"
  },
  {
    "ctime": "2024-11-12 17:54:56",
    "id": "59",
    "name": "",
    "organization": null,
    "phone": "15136102711",
    "roleIds": [
      1,
      2,
      3,
      4,
      5
    ],
    "roleNames": "大模型经理,标注员,标注审核员,标注经理,管理员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "程亚新"
  },
  {
    "ctime": "2024-11-12 17:14:22",
    "id": "58",
    "name": "",
    "organization": null,
    "phone": "15000000001",
    "roleIds": [
      1,
      2
    ],
    "roleNames": "大模型经理,管理员",
    "rolePermissionIds": null,
    "status": 0,
    "username": "测试3"
  },
  {
    "ctime": "2024-10-08 11:10:19",
    "id": "57",
    "name": "",
    "organization": null,
    "phone": "18621902288",
    "roleIds": [
      1
    ],
    "roleNames": "管理员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "ZJB"
  },
  {
    "ctime": "2024-09-09 10:20:55",
    "id": "56",
    "name": "",
    "organization": null,
    "phone": "13403386298",
    "roleIds": [
      4
    ],
    "roleNames": "标注员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "康茹芸"
  },
  {
    "ctime": "2024-09-09 10:20:35",
    "id": "55",
    "name": "",
    "organization": null,
    "phone": "13363186920",
    "roleIds": [
      4
    ],
    "roleNames": "标注员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "刘换艳"
  },
  {
    "ctime": "2024-09-09 10:19:09",
    "id": "54",
    "name": "",
    "organization": null,
    "phone": "13273309505",
    "roleIds": [
      4
    ],
    "roleNames": "标注员",
    "rolePermissionIds": null,
    "status": 1,
    "username": "李娜"
  }
];

const handleSizeChange = (val: number) => {
  queryData.pageSize = val;
};

const handleCurrentChange = (val: number) => {
  queryData.pageNum = val;
};

const userForm = reactive({
  username: '',
  phone: '',
  roleIds: [],
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' },
  ],
  roleIds: [
    { required: true, message: '请选择角色', trigger: 'change' },
  ],
};

const dialog = reactive({
  type: 'add',
  visible: false,
  title: '',
})


const userFormRef = ref<any>(null)
const openConfigDialog = (type: string, row: any = null) => {
  dialog.type = type;
  dialog.visible = true;
  switch (type) {
    case 'add':
      dialog.title = '新增用户'
      Object.assign(userForm, {
        username: '',
        phone: '',
        roleIds: []
      });
      // 清空校验
      nextTick(() => {
        userFormRef.value?.clearValidate();
      });
      break;
    case 'update':
      dialog.title = '编辑用户'
      Object.assign(userForm, {
        username: row.username,
        phone: row.phone,
        roleIds: row.roleIds
      });
      break;
    case 'permission':
      dialog.title = '编辑权限'
      nextTick(() => {
        treeRef.value!.setCheckedKeys(row.roleIds, false)
      })
      break;
    default:
      break;
  }
};
const close = () => {
  userFormRef.value?.clearValidate();
  userFormRef.value?.resetFields()
}
const submitAddUserForm = () => {
  userFormRef.value?.validate((valid: any) => {
    if (valid) {
      // 处理新增用户逻辑
      console.log('新增用户:', userForm);
      dialog.visible = false;
      ElMessage.success('用户新增成功');
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};
</script>

<style scoped>
.el-button {
  padding: 5px !important;
}
</style>
